<template>
	<view class="zh-u-picker-area">
		<u-mask :show="props.show" @click="close"></u-mask>
		<view class="content"  :class="{'active':props.show}">
			<view class="display-flex justify-between header">
				<text>选择地区</text>
				<image src="@/static/icons/close_icon.png" class="close-icon" @click="close"/>
			</view>
			<view class="display-flex picker-area-tabs">
				<text :class="{'active':index == pickerAreaData.active}" v-for="(item, index) in pickerAreaData.area" :key="item" @click="rePick(index)">{{ item.value }}</text>
			</view>
			<scroll-view scroll-y="true">
				<view class="picker-area-box">
					<view class="picker-area-item" v-for="item in pickerAreaData.areas[pickerAreaData.active]" :key="item.value" @click="pick(item)">
						<text>{{ item.label }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue'
	import areas from '@/data/area'
	
	const props = defineProps<{
		show?: boolean
	}>()
	
	const pickerAreaData:any = reactive({
		areas:[areas],
		area:[{value:'省份/地区'}],
		active:0
	})
	
	const emit = defineEmits(['close', 'pickOne'])
	
	const close = () => {
		emit('close')
	}
	
	const pickOne = (data: any) => {
		emit('pickOne', data)
	}
	
	const pick = (item:any) => {
		pickerAreaData.area[pickerAreaData.active] = {id:item.value, value:item.label}
		if(pickerAreaData.active == 0) pickerAreaData.area[1] = {value:'城市'}
		if(pickerAreaData.active == 1) pickerAreaData.area[2] = {value:'区/县'}
		if(pickerAreaData.active == 2) return pickOne(pickerAreaData.area)
		pickerAreaData.active++
		pickerAreaData.areas[pickerAreaData.active] = item.children
		
	}
	
	const rePick = (index: number) => {
		pickerAreaData.active = index
	}
 	
</script>

<style lang="scss" scoped>
	.zh-u-picker-area {
		.content {
			position: fixed;
			bottom:0;
			left:0;
			right:0;
			z-index:2;
			max-height:0rpx;
			border-radius: 15px 15px 0px 0px;
			background-color: $uni-bg-card-color;
			&.active {
				max-height: 800rpx;
				transition: all .6s ease-out;
			}
			.header {
				padding: 30rpx;
				font-size:32rpx;
				.close-icon {
					width: 28rpx;
					height: 28rpx;
				}
			}
			.picker-area-tabs {
				border-bottom: 1rpx solid $uni-border-color;
				text {
					padding:0 30rpx 30rpx 30rpx;
					box-sizing:border-box;
					color:$uni-text-color-grey;
					font-size:28rpx;
					
					&.active {
						font-weight:bold;
						color:$uni-text-color-light-black;
					}
				}
			}
			.picker-area-box {
				height: 600rpx;
				padding-bottom:60rpx;
				.picker-area-item {
					font-size:28rpx;
					padding:20rpx 0;
					margin-left:30rpx;
					border-bottom: 1rpx solid $uni-border-color;
					color:$uni-text-color-light-black;
				}
			}
		}
	}
	
</style>